<?php
	//if form was submitted
	//if (isset($_POST['submitted']) && $_POST['submitted']==1) { 
	if(sizeof($_POST) > 0) {

		$errormsg = ""; //Initialize errors  
	
		if($_POST["firstname"]) {
			$firstname = $_POST["firstname"]; //if firstname was entered
		}else{
			$errormsg = "Please enter firstname";
		}
		
		if($_POST["lastname"]) {
			$lastname = $_POST["lastname"]; //if lastname was entered
		}else{
			if($errormsg) {
				$errormsg = $errormsg . " and lastname";
			}else{
				$errormsg = "Please enter lastname";
			}
		}
	}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/cnstyle.css" rel="stylesheet" type="text/css" />
</head>

<body>

  <!-- <div class="container"> -->
   <div class="content">
    
    <form action="index.php" method="post" enctype="multipart/form-data">
      <table width="800" border="0" cellspacing="0" cellpadding="2">
        <tr>
          <td colspan="2">&nbsp;</td>
        </tr>
        <tr>
          <td colspan="2"><p class="small" align="justify">This form to be filled out if you choose to use Pay  			Pal or pay by   credit card. If you pay by check, you only need to fill  			out Our   Order Form. We use this form to contact you in case there is  			a   missing or problem with any of your documents, we also use the  			  address in this form to send your visa and passport back to you when  		  	it is done. We respect and protect your privacy and do not sell any  		  	information to any one. This form to be filled out per one address,  		  	head of the family or per group. Don't forget to fill out China Visa  	  		Application forms. Click here.</p></td>
        </tr>
        <tr>
          <td colspan="2"><table width="800" border="0" cellspacing="0" cellpadding="2">
            <tr>
              <td colspan="2">
				<?php
				if(isset($errormsg)) { 
					echo "<div class=\"box red\">$errormsg</div>"; 
				}
				?>
              </td>
            </tr>
            <tr>
              <td colspan="2"><table width="800" border="0" cellpadding="0" cellspacing="0">
                <tr bgcolor="#9FE1E7">
                  <td width="617" padding-left="2px"><strong>A. Basic Information</td>
                  <td width="183">&nbsp;</td>
                </tr>
              </table></td>
              </tr>
            <tr>
              <td width="183">First Name:</td>
              <td width="617" style="padding-top:5px;">
                <label for="firstname"></label>
                <input name="firstname" type="text" id="firstname" size="50" />
				</td>
            </tr>
            <tr>
              <td>Last Name:</td>
              <td><input name="lastname" type="text" id="lastname" size="50" /></td>
            </tr>
            <tr>
              <td>Email:</td>
              <td><input name="email" type="text" id="email" size="50" /></td>
            </tr>
            <tr>
              <td>Address:</td>
              <td><input name="address" type="text" id="address" size="50" /></td>
            </tr>
            <tr>
              <td>City:</td>
              <td><input name="city" type="text" id="city" size="50" /></td>
            </tr>
            <tr>
              <td>State:</td>
              <td><input name="state" type="text" id="state" size="50" /></td>
            </tr>
            <tr>
              <td>Zip Code:</td>
              <td><input name="zipcode" type="text" id="zipcode" size="50" /></td>
            </tr>
            <tr>
              <td>Phone:</td>
              <td><input name="phone" type="text" id="phone" size="50" /></td>
            </tr>
            <tr>
              <td>Mobile:</td>
              <td><input name="mobileno" type="text" id="mobileno" size="50" /></td>
            </tr>
            <tr>
              <td>Passport:</td>
              <td><input name="passport" type="text" id="passport" size="50" /></td>
            </tr>
            <tr>
              <td>Estimated Date:</td>
              <td><input name="estimated" type="text" id="estimated" size="50" /></td>
            </tr>
            <tr>
              <td><button type="button" id="update">Update</button><button type="button" id="Clear">Clear</button></td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
              <td colspan="2"><table width="800" border="0" cellpadding="2" cellspacing="1" id="listapplicants">
                <tr>
                  <th width="20" scope="col"></th>
                  <th width="134" scope="col">First Name</th>
                  <th width="148" scope="col">Last Name</th>
                  <th width="196" scope="col">Email</th>
                  <th class="hide">Address</th>
                  <th width="136" scope="col">Passport</th>
                  <th width="135" scope="col">Phone</th>
                  </tr>
                </table></td>
            </tr>
            <tr>
              <td colspan="2"></td>
            </tr>
            <tr>
              <td colspan="2"><button type="button" id="remove">Remove</button></td>
              </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr bgcolor="#9FE1E7">
              <td colspan="2"><strong>B. Visa Type and Processing time</strong></td>
              </tr>
            <tr>
              <td>Application type:</td>
              <td style="padding-top:5px;">
                <select name="applicationtype" id="applicationtype">
                  <option>- Select -</option>
                  <option>Multiple entries/ Valid (1) year / 90 days duration</option>
                  <option>Multiple entries/ Valid (24) months / 90 days duration</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>Visa type:</td>
              <td><select name="visatype" id="visatype">
                <option>- Select -</option>
<option>Tourist</option>
                <option>Business</option>
                <option>Work</option>
                <option>Student</option>
                <option>Crew</option>
              </select></td>
            </tr>
            <tr>
              <td>Processing time:</td>
              <td><select name="processingtime" id="processingtime">
                <option>- Select -</option>
<option>Special (10 days)</option>
                <option>Regular (5 days)</option>
                <option>Express (3 days)</option>
                <option>Rush (48 hours)</option>
                <option>Urgent (24 hours)</option>
              </select></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr bgcolor="#9FE1E7">
              <td colspan="2"><strong>C. Charges</strong></td>
              </tr>
            <tr>
              <td colspan="2"><table width="800" border="0" cellpadding="2" cellspacing="2" id="charges">
                <tr>
                  <th>Consular Fee</th>
                  <th>Fuel Surcharge</th>
                  <th>Agent Service Fee</th>
                  <th>Shipping Cost</th>
                  <th>Quantity</th>
                  <th>Sub-total</th>
                  <th>Total (*)</th>
                </tr>
                <tr class="charges">
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                </tr>
                
              </table></td>
              </tr>
          </table></td>
        </tr>
        <tr>
          <td colspan="2">&nbsp;</td>
        </tr>
        <tr bgcolor="#9FE1E7">
          <td colspan="2"><strong>D. Shipping </strong></td>
        </tr>
        <tr>
          <td width="183">Shipping type:</td>
          <td width="621" style="padding-top:5px;"><select name="shippingType" id="shippingType">
            <option>- Select - </option>
            <option>FedEx / UPS shipping fee $23.95</option>
            <option>Alaska, Puerto Rico, Hawaii, Guam, USVI, Canada $41.00</option>
          </select></td>
        </tr>
        <tr>
          <td colspan="2">Shipping address</td>
        </tr>
        <tr>
          <td>Street Address:</td>
          <td><input name="shipStAddr" type="text" id="shipStAddr" size="50" /></td>
        </tr>
        <tr>
          <td>City:</td>
          <td><input name="shipCity" type="text" id="shipCity" size="50" /></td>
        </tr>
        <tr>
          <td>State:</td>
          <td><input name="shipState" type="text" id="shipState" size="50" /></td>
        </tr>
        <tr>
          <td>Zip Code:</td>
          <td><input name="shipZipCode" type="text" id="shipZipCode" size="50" /></td>
        </tr>
        <tr>
          <td>Add'tl Comments:</td>
          <td><textarea name="shipAddComments" id="shipAddComments" cols="50" rows="5"></textarea></td>
        </tr>
        <tr>
          <td colspan="2">&nbsp;</td>
        </tr>
        <tr>
          <td colspan="2"><input type="submit" name="submit" id="submit" value="Submit" />
		  <button type="button" id="reset">Reset</button></td>
		  <input type="hidden" name="submitted" value="1">  
        </tr>
      </table>
     </form>
    <!-- </div> -->
  </div>
  
<script src="js/jquery-1.8.0.min.js"></script>

<script>

// Consular fee
var CONS_FEE_SPECIAL = '$140';
var CONS_FEE_REGULAR = '$140';
var CONS_FEE_EXPRESS = '$160';
var CONS_FEE_RUSH = '$170';
var CONS_FEE_URGENT = '$170';

// Service Fees
var SERV_FEE_SPECIAL = '$30';
var SERV_FEE_REGULAR = '$40';
var SERV_FEE_EXPRESS = '$60';
var SERV_FEE_RUSH = '$75';
var SERV_FEE_URGENT = '$95';

// Fuel surcharge
var FUEL_FEE = '$5';

// Return fee
var SHIPPING_FEE = '$0';

var ZERO_DOLLAR = '$0';

	(function() {
		var counter = 1;
		var $firstname = $('#firstname');
		var $lastname = $('#lastname');
		var $email = $('#email');
		var $passport = $('#passport');
		var $phone = $('#phone');
		var $listapplicants = $('#listapplicants');
		var $shipCostSelected = 0;
		var $applicationTypeSelected = 0;
		var $confee, $surcharge, $servicefee, $shippingcost, 
			$quantity, $subtotal, $total;
		$visatype = $("select[name='visatype']");
		
		// recall the last choice from processing time when selecting citizenship radio button
		var recall_processing_time;
		
		var calculate = function() {
			var pt = $('#processingtime').prop('selectedIndex');
			if(pt>0) {
				var subtotal = parseFloat($confee.text().replace('$','')) +
							parseFloat($surcharge.text().replace('$','')) +
							parseFloat($servicefee.text().replace('$','')) +
							parseFloat($shippingcost.text().replace('$',''));
				$subtotal.text('$'+subtotal);
				
				if(isNaN(parseInt($quantity.text()))) {
					$quantity.text('0');
				}
			
				$total.text('$'+subtotal*parseFloat($quantity.text()));
			}
		}
		
		$('#charges tr').each(function(){
			$this = $(this);
			$confee = $this.find('td').eq(0);
			$surcharge = $this.find('td').eq(1);
			$servicefee = $this.find('td').eq(2);
			$shippingcost = $this.find('td').eq(3);
			$quantity = $this.find('td').eq(4);
			$subtotal = $this.find('td').eq(5);
			$total = $this.find('td').eq(6);
		});

		$('#processingtime').change(function(){
			var pt = $(this).prop('selectedIndex');
			switch(pt) 
			{
				case 1: //special
					$confee.text(CONS_FEE_SPECIAL);
					$surcharge.text(FUEL_FEE);
					//$servicefee.text(SERV_FEE_SPECIAL);
					break;
				case 2: //regular
					$confee.text(CONS_FEE_REGULAR);
					$surcharge.text(FUEL_FEE);
					//$servicefee.text(SERV_FEE_REGULAR);
					break;
				case 3: //express
					$confee.text(CONS_FEE_EXPRESS);
					$surcharge.text(FUEL_FEE);
					//$servicefee.text(SERV_FEE_EXPRESS);
					break;
				case 4: //rush
					$confee.text(CONS_FEE_RUSH);
					$surcharge.text(FUEL_FEE);
					//$servicefee.text(SERV_FEE_RUSH);
					break;
				case 5: //urgent
					$confee.text(CONS_FEE_URGENT);
					$surcharge.text(FUEL_FEE);
					//$servicefee.text(SERV_FEE_URGENT);
					break;
			}
			
			//if(isNaN(parseInt($shippingcost.text()))) {
			//			$shippingcost.text(ZERO_DOLLAR);
			//		}else if ($shipCostSelected === 0) {
			//			$shippingcost.text(ZERO_DOLLAR);
			//		}
					
			switch($shipCostSelected) {
				case 0: 
					$shippingcost.text('$0'); break;
				case 1: 
					$shippingcost.text('$23.95'); break;
				case 2:
					$shippingcost.text('$41.00'); break;
			}
			
			switch($applicationTypeSelected)
			{
				case 0: $servicefee.text('$0'); break;
				case 1: $servicefee.text('$30'); break;
				case 2: $servicefee.text('$70'); break;
			}
													
			calculate();
		});
		
		$('#shippingType').change(function() {
			$shipCostSelected = $(this).prop('selectedIndex');
			switch($shipCostSelected) 
			{
				case 0: $shippingcost.text('$0'); break;
				case 1: $shippingcost.text('$23.95'); break;
				case 2: $shippingcost.text('$41.00'); break;
			}
			
			calculate();
		});
		
		$('#applicationtype').change(function() {
			$applicationTypeSelected = $(this).prop('selectedIndex');
			switch($applicationTypeSelected)
			{
				case 0: $servicefee.text('$0'); break;
				case 1: $servicefee.text('$30'); break;
				case 2: $servicefee.text('$70'); break;
			}
			console.log($applicationTypeSelected);
			calculate();
		});
		
		$('#visatype').change(function(){
			var vt = $(this).val();
		});
		
		$('#reset').click(function(){
			var isDefault = confirm('Reset to default?');
			if(isDefault) {
				$confee.text(DEFAULT_CONFEE_VALUE);
			}
		});
		
		$('#update').click(function() {
			if(counter > 5) {
				alert('only 5 applicants allow');
				return false;
			}
			
			$('#listapplicants').find('tbody')
				.append($('<tr class="charges">')
					.append($('<td><input type="checkbox"></td>'))
					.append($('<td>').text($firstname.val()))
					.append($('<td>').text($lastname.val()))
					.append($('<td>').text($email.val()))
					.append($('<td class="hide"></td>'))
					.append($('<td>').text($passport.val()))
					.append($('<td>').text($phone.val()))
			);

			$quantity.text(counter);
			calculate();
			counter++;
		});
		
		$('#remove').click(function() {
			var listChecked = new Array;
			var i=0;
			$('#listapplicants tr').each(function(index, value) {
				$this = $(this);

				if(index > 0) {
					state = $this.find('input:checkbox:first').attr('checked');
					if(state == 'checked') {
						listChecked[i] = index;
						i++;
					}
				}
			});

			for(i=listChecked.length; i>0; i--) {
				$listapplicants.find('tr').eq(listChecked[i-1]).remove();
				counter--;
				$quantity.text(counter-1);
				calculate();
			}
			
		});
		
	})();
	
	
</script>

</body>
</html>